<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单输入绑定</title>
    <script src="../public/vue_3.2.36.js"></script>
    <style>
      #position {
        position: absolute;
        right: 0px;
        top: 30%;
        width: 500px;
      }
      li {
        font-size: 18px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div id="position">
      <ol>
        <li>
          文本类型的 &lt;input &gt; 和 &lt;textarea&gt; 元素会绑定 value
          property 并侦听 input 事件；
        </li>
        <li>
          &lt;input type="checkbox"&gt; 和 &lt;input type="radio"&gt; 会绑定
          checked property 并侦听 change 事件；
        </li>
        <li>&lt;select&gt; 会绑定 value property 并侦听 change 事件。</li>
      </ol>
    </div>
    <div id="app">
      <h1>这里主要是展示一下表单输入：{{text}}</h1>
      表单的双向绑定:<input
        :value="text"
        @input="event => text = event.target.value"
      />
      v-model的双向绑定:<input v-model="text" />
      <hr />
      <p>Message is: {{ message }}</p>
      多行文本：<input v-model="message" placeholder="edit me" />
      <hr />
      单一的复选框：<input type="checkbox" id="checkbox" v-model="checked" />
      <label for="checkbox">{{ checked }}</label><br />
      <div>
        将多个复选框绑定到同一个数组或集合的值:Checked names: {{ checkedNames }}
      </div>
      <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
      <label for="jack">Jack</label>
      <input type="checkbox" id="john" value="John" v-model="checkedNames" />
      <label for="john">John</label>
      <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
      <label for="mike">Mike</label>
      <hr />
      <div>单选按钮：Picked: {{ picked }}</div>
      <input type="radio" id="one" value="One" v-model="picked" />
      <label for="one">One</label>
      <input type="radio" id="two" value="Two" v-model="picked" />
      <label for="two">Two</label>
      <hr />
      <div>单个选择器：Selected: {{ selected }}</div>
      <select v-model="selected">
        <option disabled value="">Please select one</option>
        <option>A</option>
        <!-- 这里如果不给value的时候，默认给的是选项中的文本 -->
        <option>B</option>
        <option>C</option>
      </select>
      <div>多选（绑定到一个数组上）Selected: {{ selected }}</div>
      <select style="width: 100px" v-model="selected" multiple>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <hr />
      <p>
        关于复选框true-value 和 false-value 是 Vue 特有的 attributes，仅支持和
        v-model 配套使用。
      </p>
      <input
        type="checkbox"
        v-model="toggle"
        true-value="yes"
        false-value="no"
        id="res1"
      />
      <label for="res1">{{toggle}}</label>&nbsp;&nbsp;&nbsp;&nbsp;&lt;input
      type="checkbox" v-model="toggle" true-value="yes" false-value="no" /&gt;
      <hr />
      <p>表单输入的修饰符：.lazy/.number/.trim</p>
      .lazy <input type="text" v-model.lazy="msg1" />{{msg1}} <br />
      .number <input type="text" v-model.number="msg2" />typeof:{{typeof msg2}}
      <br />
      .trim <input type="text" v-model.trim="msg3" />{{msg3}} <br />
    </div>

    <script>
      const { createApp, ref, reactive, toRefs } = Vue;

      const app = createApp({
        setup() {
          const text = ref("hello Vue3");
          const message = ref("");
          const checked = ref(true);
          const checkedNames = ref([]);
          const picked = ref();
          const selected = ref();
          const toggle = ref("no");
          const msg = reactive({
            msg1: "hello",
            msg2: "nihao",
            msg3: "      hi",
          });
          return {
            text,
            message,
            checked,
            checkedNames,
            picked,
            selected,
            toggle,
            ...toRefs(msg),
          };
        },
      });
      app.mount("#app");
    </script>
  </body>
</html>
